<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>Document</title>
        <link rel="stylesheet" href="./dist/css/bootstrap.min.css" />

        <style>
            .table {
                width: 500px;
            }
        </style>
    </head>
    <body>
        <!-- 
            boostrap 一个类ui 需要使用框架规定的 class 才会有对应的样式
            boostrap 栅格系统中 表示一个容器被分为12 份
            当你给一个元素 设置class名为 col-md-1 表示这个元素占据 容器的1/12
        -->
        <div class="container-fluid">
            <!-- <div class="row">
                <div class="col-lg-2 col-md-3 col-xs-6 col-sm-4">.col-md-1</div>
                <div class="col-lg-2 col-md-3 col-xs-6 col-sm-4">.col-md-1</div>
                <div class="col-lg-2 col-md-3 col-xs-6 col-sm-4">.col-md-1</div>
                <div class="col-lg-2 col-md-3 col-xs-6 col-sm-4">.col-md-1</div>
                <div class="col-lg-2 col-md-3 col-xs-6 col-sm-4">.col-md-1</div>
                <div class="col-lg-2 col-md-3 col-xs-6 col-sm-4">.col-md-1</div>
                <div class="col-lg-2 col-md-3 col-xs-6 col-sm-4">.col-md-1</div>
                <div class="col-lg-2 col-md-3 col-xs-6 col-sm-4">.col-md-1</div>
                <div class="col-lg-2 col-md-3 col-xs-6 col-sm-4">.col-md-1</div>
                <div class="col-lg-2 col-md-3 col-xs-6 col-sm-4">.col-md-1</div>
                <div class="col-lg-2 col-md-3 col-xs-6 col-sm-4">.col-md-1</div>
                <div class="col-lg-2 col-md-3 col-xs-6 col-sm-4">.col-md-1</div>
            </div> -->

            <table class="table table-bordered table-hover">
                <thead>
                    <tr>
                        <th>序号</th>
                        <th>姓名</th>
                        <th>年龄</th>
                        <th>性别</th>
                    </tr>
                </thead>
                <tbody>
                    <tr class="success">
                        <td>1</td>
                        <td>2</td>
                        <td>3</td>
                        <td>4</td>
                    </tr>
                    <tr>
                        <td>1</td>
                        <td>2</td>
                        <td>3</td>
                        <td>4</td>
                    </tr>
                    <tr>
                        <td>1</td>
                        <td>2</td>
                        <td>3</td>
                        <td>4</td>
                    </tr>
                    <tr>
                        <td>1</td>
                        <td>2</td>
                        <td>3</td>
                        <td>4</td>
                    </tr>
                </tbody>
            </table>

            <form style="width: 500px">
                <div class="form-group">
                    <label for="exampleInputEmail1">用户名</label>
                    <input
                        type="email"
                        class="form-control"
                        id="exampleInputEmail1"
                        placeholder="Email"
                    />
                </div>
                <div class="form-group">
                    <label for="exampleInputPassword1">密码</label>
                    <input
                        type="password"
                        class="form-control"
                        id="exampleInputPassword1"
                        placeholder="Password"
                    />
                </div>
                <button type="submit" class="btn btn-default">登录</button>
            </form>

            <form class="form-inline">
                <div class="form-group">
                    <label for="exampleInputName2">Name</label>
                    <input
                        type="text"
                        class="form-control"
                        id="exampleInputName2"
                        placeholder="Jane Doe"
                    />
                </div>
                <div class="form-group">
                    <label for="exampleInputEmail2">Email</label>
                    <input
                        type="email"
                        class="form-control"
                        id="exampleInputEmail2"
                        placeholder="jane.doe@example.com"
                    />
                </div>
                <button type="submit" class="btn btn-default">
                    Send invitation
                </button>
            </form>

            <form class="form-inline">
                <div class="form-group">
                    <label class="sr-only" for="exampleInputAmount">
                        Amount (in dollars)
                    </label>
                    <div class="input-group">
                        <div class="input-group-addon">$</div>
                        <input
                            type="text"
                            class="form-control"
                            id="exampleInputAmount"
                            placeholder="Amount"
                        />
                        <div class="input-group-addon">.00</div>
                    </div>
                </div>
                <button type="submit" class="btn btn-primary">
                    Transfer cash
                </button>
            </form>
            <div class="form-group has-success has-feedback">
                <label class="control-label" for="inputSuccess2">
                    Input with success
                </label>
                <input
                    type="text"
                    class="form-control input-sm"
                    id="inputSuccess2"
                    aria-describedby="inputSuccess2Status"
                />
                <span
                    class="glyphicon glyphicon-ok form-control-feedback"
                    aria-hidden="false"
                ></span>
                <span id="inputSuccess2Status" class="sr-only">(success)</span>
            </div>

            <button type="button" class="close" aria-label="Close">
                <span aria-hidden="true">&times;</span>
            </button>

            <span class="caret"></span>

            <span class="glyphicon glyphicon-yen"></span>

            <ol class="breadcrumb">
                <li><a href="#">Home</a></li>
                <li><a href="#">Library</a></li>
                <li class="active">Data</li>
            </ol>
        </div>
    </body>
</html>
